<template>
  <div class="root">
    <div class="content">
      <div class="class-name">
        {{className}}学员就业记录管理
      </div>
      <div class="add-employment-button">
        <button @click="toggleSetDialog(EMPLOYMENT_ACTION.ADD)">添加就业记录</button>
      </div>
      <div class="table-container">
        <div v-for="(student,key) in tableData" :key="key" class="every-student-info">
          <div class="student-info-title">
            <span class="title-header">姓名</span>
            <span class="title-content">{{student.name}}</span>
            <span class="title-header">年龄</span>
            <span class="title-content">{{student.age}}</span>
            <span class="title-header">学校</span>
            <span class="title-content">{{student.school}}</span>
            <span class="title-header">专业</span>
            <span class="title-content">{{student.major}}</span>
            <span class="title-header">学历类型</span>
            <span class="title-content">{{student.school_type}}</span>
            <span class="title-header">毕业时间</span>
            <span class="title-content">{{student.graduation_date}}</span>
            <span class="title-header">是否获得毕业证</span>
            <span class="title-content">{{student.has_graduation_cert==true?"是":"否"}}</span>
            <span class="title-header">联系电话</span>
            <span class="title-content">{{student.phone}}</span>
            <div class="student-info-button">
              <span class="iconfont" v-show="student.showEmploymentInfo===false" @click="getStudentEmploymentInfo(student,true)">&#xe689;</span>
              <span class="iconfont" v-show="student.showEmploymentInfo===true" @click="getStudentEmploymentInfo(student,false)">&#xe600;</span>
            </div>
          </div>

          <div class="student-employment-record" v-show="student.showEmploymentInfo">
              <el-table :data="student.employmentInfo" style="width: 80%">
                <el-table-column prop="company_name" label="公司名称" width="220" />
                <el-table-column label="所在城市" width="120">
                  <template #default="{ row }">
                    {{JSON.parse(row.work_location).province + ' ' + JSON.parse(row.work_location).city}}
                  </template>
                </el-table-column>
                <el-table-column prop="station" label="入职岗位" width="150" />
                <el-table-column prop="entry_date" label="入职时间" width="90" />
                <el-table-column prop="salary" label="薪资" width="100" />
                <el-table-column prop="offer" label="入职通知书" width="100" >
                  <template #default="scope">
                    <el-button v-if="scope.row.offer!==''" type="primary" @click="showOffer(scope.row.offer)">预览</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="is_entry" label="学员选择" width="90" >
                  <template #default="scope">{{ ENTRY_TYPE[scope.row.is_entry]!==undefined ? ENTRY_TYPE[scope.row.is_entry] : '其他'}}</template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="160" />
                <el-table-column label="操作" width="100">
                  <template #default="scope">
                    <el-button type="success" @click="toggleSetDialog(EMPLOYMENT_ACTION.UPDATE, scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
        </div>
      </div>
    </div>
    <EmploymentSet></EmploymentSet>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import {getStudentByClassIdAPI} from "@/network/student/student";
import { ElMessage } from "element-plus"
import EmploymentSet from "@/components/class/employment/EmploymentSet.vue";
import {useEmploymentStore} from "@/store/store-employment";
import {getEmploymentByStudentIdAPI} from "@/network/employment/employment";
import EventBus from "@/plugins/event-bus";
import {EMPLOYMENT_ACTION, ENTRY_TYPE} from "@/dict/dict-employment";

const employmentStore = useEmploymentStore();
const toggleSetDialog = (actionType, updateData) => {
  if(actionType===EMPLOYMENT_ACTION.ADD){
    employmentStore.toggleEmploymentStoreDialogVisible();
    EventBus.emit("add-employment-data-event",{
      classId:classId.value,
      className:className.value,
      actionType:EMPLOYMENT_ACTION.ADD
    })
  }else if (actionType===EMPLOYMENT_ACTION.UPDATE){
    employmentStore.toggleEmploymentStoreDialogVisible();
    updateData.actionType = EMPLOYMENT_ACTION.UPDATE
    updateData.classId = classId.value
    updateData.className = className.value
    EventBus.emit("update-employment-data-event", updateData)
  }
};


const route = useRoute();
const classId = ref('');
const className = ref("")
// 获取路径上的classId
classId.value = route.params.classId;
className.value = route.params.className;
let tableData = ref([]);

onMounted(() => {
//  页面加载的时候，根据路径上的班级id请求这个班的全部学员
  getStudentByClassIdAPI(classId.value).then((res) => {
    // console.log(res.data)
    if (res.data.code != 0) {
      ElMessage.error("学员信息获取失败")
    } else {
      tableData.value = res.data.data;
      for (let i = 0; i < tableData.value.length; i++) {
        tableData.value[i].showEmploymentInfo = false
      }
    }
    EventBus.emit("student-list-event", tableData.value)
  })
})

//  这里需要根据每一个学员再获取学员就业信息
let getStudentEmploymentInfo = (student,isShow) => {
  student.showEmploymentInfo = isShow;
  if (isShow === true) {
    getEmploymentByStudentIdAPI(student.id).then((res) => {
      if (res.data.code !== 0) {
        ElMessage.error(res.data.message)
      }
      else {
        student.employmentInfo = res.data.data
      }
    })
  }
}

const showOffer = (offer) => {
  let url = process.env.VUE_APP_BASE_FILE_URL + offer
  window.open(url, '_blank');
}

EventBus.on("refresh-employment-list-event", (eventRefreshData) => {
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].id === eventRefreshData.student_id) {
      if (eventRefreshData.id === undefined) {
        if (tableData.value[i].employmentInfo !== undefined) {
          tableData.value[i].employmentInfo.push(eventRefreshData)
        }
      }
      else{
        for (let j = 0; j < tableData.value[i].employmentInfo.length; j++) {
          if (tableData.value[i].employmentInfo[j].id === eventRefreshData.id) {
            tableData.value[i].employmentInfo[j] = eventRefreshData
          }
        }
      }
    }
  }
})


</script>

<style scoped lang="less">
.root {
  background-color: #f4f4f4;
  .sys-name {
    text-align: left;
    margin-left: 30px;
    margin-top: 30px;
  }

  .content{
    margin:0 auto;
    width: 1400px;
    .add-employment-button{
      text-align: right;
      >button{
        margin-right: 100px;
        width: 120px;
        height: 40px;
        border-radius: 10px;
        background-color: #3DB590;
        color:white;
        font-weight: bold;
      }
    }
    .class-name{
      font-weight: bold;
      font-size: 20px;
    }
    .table-container{
      margin-top: 30px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
      padding-top: 30px;
      .student-info-button{
        text-align: left;
        margin-left: 20%;
        padding-left: 27%;
        span{
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 50%;
          color:white;
          cursor: pointer;
        }
      }
      .every-student-info{
        margin-top: 20px;
        .student-info-title{
          width: 800px;
          margin-left: 20%;
          >span{
            display: inline-block;
            border: 1px solid #4FD1C5;
            height: 30px;
            line-height: 30px;
            margin-top: 5px;
          }
          .title-header{
            width: 160px;
            font-weight: bold;
            background-color: #4FD1C5;
            color:white;
          }
          .title-content{
            width: 200px;
          }
        }
        .student-employment-record{
          // 只有这样布局方式才能让table居中显示
          width: 100%;
          margin-left:10%;
        }
      }
    }
  }
}
</style>